<!DOCTYPE html>
<html lang="en">
<head>
<!--  每一个组件都是一个vue实例  因为在组件中 每一个可以进行每一个vue中的事情-->
    <meta charset="UTF-8">
    <title>todoList功能开发</title>
  <script src="../Vue.js"></script>
</head>
<body>
<div id="root">
  <input v-model="inputValue">
  <button @click="handelClick">提交</button>
  <ul>
<!--    利用自定义的content接收到item  再在组件里面接收-->
    <todo-item
      v-for="(item , index) of list"
      :key="index"
      :content="item"
      :index="index"
      @delete="handleDelete"
    >
    </todo-item>
  </ul>
</div>

<script>

// <!--  局部组件的定义  调用时需要在vue中引用-->
// var Todoitem={
//   template:'<li>item</li>'
// }

<!--  全局组件  这个可以看做是父组件的子组件-->
  Vue.component('todo-item',{
    //接收外部传进来的数据  父组件通过属性的模式，来给子组件传递参数。子组件通过发布订阅模式来给父组件传递参数
    props:['content','index'],
    template:'<li @click="handleClick">{{content}}</li>',
    methods:{
      handleClick:function () {
        this.$emit('delete',this.index)
      }
    }

  })


  //这个大的vue可以看做是一个父组件
  new  Vue({
    el:"#root",
    // //对局部组件的引用
    // components:{'todo-item':Todoitem},
    data:{
      inputValue:'',
      list:[],
    },
    methods:{
      handelClick : function(){
        //将数据添加到list中
        this.list.push(this.inputValue);
        this.inputValue=''
      },

      handleDelete : function (index) {
        //splice后面的1  是指从指定位置删除一项
        this.list.splice(index ,1)
      }
    }
  })
</script>
</body>
</html>
